<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<%
	String path = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getServletContext().getContextPath() + "/";
%>
<head>
<base href="<%=path%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>视频列表</title>

<style>
.jumbotron {
	width: 80%;
	margin: auto;
	margin-top: -60px;
	border-radius: 5px;
}

.jumbotron h3 {
	margin-left: 50px;
	margin-top: 20px;
}

#div1 {
	width: 90%;
	margin: auto;
}

#div4 {
	width: 85%;
	margin: auto;
}

#div5 {
	width: 85%;
	margin: auto;
	text-align: right;
}


</style>
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">
</head>
<body>
	<nav class="navbar navbar-inverse">
	<div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
				aria-expanded="false">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">视频管理系统</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li>
				<a href="video/video_list.do">视频管理 <span class="sr-only">(current)</span></a>
				</li>
				<li><a href="speaker/speaker_list.do">主讲人管理</a></li>
				<li><a href="course/course_list.do">课程管理</a></li>
				<li><a href="tjfx/tjfx2.do">课程分析</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="admin/loginOut.do">admin 
				<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
				</a></li>
			</ul>
		</div>
		<!-- /.navbar-collapse -->
	</div>
	<!-- /.container-fluid --> </nav>

	<div class="jumbotron">
		<h3>视频列表 - 视频管理</h3>
	</div>

<!--添加视频、批量删除  -->
	<div id="div1">
		<a href="video/goAddVideo.do"><button type="button" class="btn btn-primary">添加视频</button></a>
		<button class="btn btn-primary" type="submit" onclick="deleteById()" value="ids">
			批量删除 <span class="badge" id="num">0</span> 
		</button>
<!--查询视频  -->
		<form class="navbar-form navbar-right"  action="video/video_list.do" method="post">
			<div class="form-group">
				<input type="text" class="form-control" name="video_title" placeholder="视频标题">
				<select class="form-control" name="speaker_id">
					<option value="0">请选择主讲人</option>
					<c:forEach items="${speakers}" var="speaker">
					<option value="${speaker.id}">${speaker.speaker_name}</option>
					</c:forEach>
				</select>
				<select class="form-control" name="course_id">
					<option value="0">请选课程</option>
					<c:forEach items="${courses}" var="course">
					<option value="${course.id }">${course.course_name}</option>
					</c:forEach>
				</select>
			</div>
			<button type="submit" class="btn btn-primary">查询</button>
		</form>
	</div>

<!--视频列表  -->
	<div id="div4">
		<form id="form1">
		<table class="table table-hover" id="table1">
			<tr>
				<th width="10%"><input type="checkbox" id="selectAll"/>&nbsp;&nbsp;序号</th>
				<th width="10%">名称</th>
				<th width="20%">介绍</th>
				<th width="10%">讲师</th>
				<th width="10%">课程</th>
				<th width="10%">时长</th>
				<th width="10%">播放次数</th>
				<th width="10%">编辑</th>
				<th width="10%">删除</th>
			</tr>
			<c:forEach items="${page.list}" var="video" varStatus="status">
			    <tr>
				<td><input type="checkbox" value="${video.id}" class="input_select" name="ids"/>&nbsp;&nbsp;${status.count}</td>
				<td width="10%">${video.video_title}</td>
				<td>${video.video_descr}</td>
				<td></td>
				<td></td>
				<td width="10%">${video.video_length}</td>
				<td width="6%">${video.video_play_times}</td>
				<td width="6%">
				<a href="video/update_video.do?id=${video.id}"><span class="glyphicon glyphicon-edit"aria-hidden="true"></span></a>
				</td>
				 <td width="6%">
				 <a href="video/delete_video.do?id=${video.id}"><span class="glyphicon glyphicon-trash"aria-hidden="true"></span></a>
				 </td>
		    </tr>
			</c:forEach>
		</table>
		</form>
	</div>

    <!--分页  -->
	<div id="div5">
		<nav aria-label="Page navigation">
		<ul class="pagination">
			<li><a href="video/video_list.do?pageNow=${page.pageNow-1}" aria-label="Previous"> <span
					aria-hidden="true">&laquo;</span>
			</a></li>
			<li><a href="#">${page.pageNow}/${page.pageCount }</a></li>
			
			<li><a href="video/video_list.do?pageNow=${page.pageNow+1}" aria-label="Next">
			 <span aria-hidden="true">&raquo;</span>
			</a></li>
		</ul>
		</nav>
	</div>
	
	<!--批量删除  -->
	<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		//点击批量删除，以ajax的形式提交需要删除的id
		function deleteById(){
			//给出提示框，避免误删
			var boo = confirm("是否确认删除？");
			if(boo){
				//ajax
				$.post("video/delete_videoAll.do",$('#form1').serialize(),function(data){
					//删除成功
					if(data.success){
						//刷新当前页面
						location.href="video/video_list.do";
					}else{
						//给出删除失败的提示
						alert(data.message);
					}
				});
			}
		}
		$(function(){
			//获取id=div4下的所有input框
			var ipts = $("#div4 input");
			//给全选按钮绑定事件，点击时触发
			$("#selectAll").click(function(){
				//获取当前全选按钮的选中状态
				var check=document.getElementById("selectAll").checked;
				//全选选中，其他都选中。全选不选，其他都不选
				if(check){
					for(i=1;i<ipts.length;i++){
						$(ipts[i]).attr("checked",true);
					}
					//修改批量删除后的统计数
					$("#num").html(ipts.length-1);
				}else{
					for(i=1;i<ipts.length;i++){
						$(ipts[i]).attr("checked",false);
					}
					$("#num").html(0);
				}
			})
			//当其他复选框被点击时，更改批量删除后的统计数
			$(".input_select").click(function(){
				var nums=$("input:checked").length;
				$("#num").html(nums);
			})
		})
	
	
	
	
	
	</script>

</body>
</html>